<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
		<style>
			.share_alert{
				position: fixed; 
				top: 0; 
				bottom: 0; 
				left: 0; 
				right: 0;
				z-index: 1000;
			}
			#tabs div:after {
				content: "";
				position: absolute;
				display: block;
				width: 0;
				height: .25rem;
				background-color: #282828;
				bottom: 0;
				left: 50%;
				transition: all .4s;
				transform: translate(-50%, 0);
			}
			
			#tabs div.active:after {
				width: 2.5rem;
			}
			
			em.down img {
				transform: rotateZ(180deg);
			}
			
			.item {
				justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			
			.item b {
				margin-bottom: 0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			
			.item em {
				display: block;
				width: 3.666666rem;
				height: 1.833333rem;
				border: 1px solid #666;
				border-radius: 0.549999rem;
				text-align: center;
				line-height: 1.833333rem;
				font-size: 1.166666rem;
			}
			
			#wpr {
				color: #666;
				font-size: 1.25rem;
				line-height: 1.5rem;
			}
			
			#wpr .item:nth-last-child(1) {
				border: none;
			}
			
			.back-c {
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.p-r {
				position: relative;
				line-height: 33px;
			}
			
			.left span {
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			
			.buy {
				float: right;
				width: 7.083333rem;
				line-height: 2.5rem;
				background: -webkit-gradient(linear, center top, center bottom, from(#F7BA64), to(#FF9D3C));
				border-radius: 8.333333rem;
				font-size: 1.083333rem;
				color: #fff;
				text-align: center;
				box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			
			#worth p {
				font-family: .PingFangSC-Light;
				color: #282828;
				line-height: 20px;
				font-size: 1.16666rem !important;
			}
			
			#worth strong {
				font-family: .PingFangSC-Medium;
				font-size: 1.5rem !important;
				color: #282828;
			}
			
			.aui-dialog {
				width: 18rem !important;
				margin-left: -9rem !important;
				font-size: 0.95em !important;
			}
			
			.aui-dialog-body {
				font-size: 1.18em !important;
				padding: 1rem .3rem !important;
			}
			
			.aui-dialog-btn {
				height: 2.9rem;
				line-height: 2.9rem;
				font-size: 1.6rem;
			}
			
			.buymaskFade {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
			}
			
			.webkit {
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				;
			}
			
			#tabs div:after {
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}
			
			.clearfix :after {
				clear: both;
				content: '.';
				display: block;
				width: 0;
				height: 0;
				visibility: hidden;
			}
			.follow-code-top{
				position: relative;
				width: 100%;
				background: #303133;
				padding:0.8rem  2rem;
				z-index: 100;
				overflow: hidden;
				display: none;
			}
			.follow-code-logo{
				float: left;
				width: 4rem;
				z-index: 1000;
			}
			.follow-code-btn,.open-code-btn {
				position: absolute;
				line-height: 3.5rem;
				padding: 0 1rem;
				height: 3.5rem;
				top:1.2rem;
				right:2rem;
				text-align: center;
				color: #333333;
				background: #fbd454;
				border-radius: 2px;
			}
			.follow-code-container .follow-mask{
				position: fixed;
				top:0;
				left:0;
				bottom:0;
				right: 0;
				background:rgba(0,0,0,.3);
				z-index: 100;
			}
			.follow-code-container .follow-dialog{
				position: fixed;
				top:50%;
				left:50%;
				margin-left:-125px;
				margin-top:-140px;
				width:250px;
				height:280px;
				border-radius: 6px;
				background: #FFf;
				z-index: 101;
				text-align: center;
				padding:30px 0 25px 0;
			}
			.follow-code-container .follow-close{
				background: url(img/close1.png) no-repeat center center;
				background-size: 100% 100%;
				position: absolute;
				right:12px;
				top:12px;
				height:18px;
				width:18px;
			}
			.left img{
				width: 3.23rem;height: 3.23rem;float: left;margin-right: .83rem;border-radius: 50%;
			}
			#bottomRead{
				width: 100%;height: 4.5rem;border-top: 1px solid #E5E5E5;overflow: hidden;position: fixed;z-index:10;bottom: 0;left: 0;
			}
			#beginRead{
				background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.5rem;font-size:16px;color: #333; font-size: 16px;font-weight: bold;
			}
			.shelf-btn{
				background: #fff;text-align: center;line-height:4.5rem;font-size:16px;
			}
			#wxshare{
				box-shadow:0.1rem 0.1rem 1rem #e6e6e6;border-radius: 4px;width: 9.17rem;height: 12rem;margin: 0;border: 0;vertical-align: middle;
			}
			#writeComment{
				padding:0 1.3rem;position: absolute;top:-1rem;right:0;font-size:14px;border:1px solid #FF9D3C;color: #FF9D3C;border-radius: 1.5rem; height:3rem;line-height:3rem
			}
			.praise{
				vertical-align:middle;display:inline-block;float:left;width: 1.67rem;height: 1.67rem;border-radius: 100%;margin-left: 0.5rem;
			}
			#tryread{
				background: #FFFFFF;border-bottom: 1px solid #FFFFFF;text-align: center;border-top: 1px solid #E5E5E5;font-size: 16px;color: #282828;
			}
			#warn{
				background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 1000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;
			}
			#free-receive{
				width: 100%; left: 0; background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.58rem;font-size:16px;color: #333333; font-weight: bold;
			}
			#pay_book{
				background: #FFFFFF;border-top: 1px solid #EEEEEE;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;
			}
			#buy{
				background: #fbd454;border-top: 1px solid #fbd454;text-align: center;line-height:4.58rem;font-size:16px;color: #333333;font-weight: bold;
			}
			#footer{
				width: 100%;height: 4.58rem;overflow: hidden;position: fixed;bottom: 0;left: 0;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<img class="share_alert hide" src="img/share_alert_img.png"/>
		<div class="follow-code-top">
			<img src="img/logo.png" class="share-user-img follow-code-logo" alt="" />
			<span style="margin-left:10px;line-height: 40px; color: white;" class="no-share-text">解读全球经典好书</span>
			<div class="follow-code-btn hide" style="text-align: right;">
				关注公众号
			</div>
			<div class="open-code-btn hide" style="text-align: right;">
				打开公众号
			</div>
		</div>
		<div class="follow-code-container" style="display: none;">
			<div class="follow-mask"></div>
			<div class="follow-dialog" >
				<div class="follow-close">
				</div>
				<div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">
					蜜读
				</div>
				<div>
					关注公众号，查看更多好书
				</div>
				<img src="img/wechatCode.png" alt="" style="width: 100px;display: inline-block;margin: 25px 0 15px 0;"/>
				<div style="color:#999">
					长按识别二维码关注
				</div>
			</div>
		</div>
		<div id="content">
		</div>
		<!--回到首页-->
		<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
	</body>
	<script id="detail_tem" type="text/html">
		{{if userVip.type==1||data.isorder==1}}
		<div id="bottomRead">
			<div id="{{data.isbookshelf==0?'addBookshelf':'removeBookshelf'}}" class="col-xs-6 shelf-btn" style="color:{{if data.isorder==1&&data.themeisorder!=1}}#999 {{else}}#333{{/if}}">{{(data.isorder==1&&data.themeisorder!=1)?'已加入书架':(data.isbookshelf==0?'加入书架':'移除书架')}}</div>
			<div id="beginRead" class="col-xs-6">开始听书</div>
		</div>
		{{/if}}

		<div id="tabToTop" style="overflow: hidden;">
			<div class="col-xs-12" style="padding-right: 12px;padding-left: 12px;height: 13.7rem;padding-top: 10px;">
				<div  style="height: 12rem;padding: 0; float: left">
					<img id="wxshare" src="{{data.bookimg | addUrl}}" style="">
				</div>
				<div style="padding: .5rem 1.5rem;margin: 0; float: left ;width:calc(100% - 9.3rem)" onclick="">
					<div class="col-xs-12" style="padding: 0;margin: 0;">
						<p style="font-family: bolder;font-size: 1.6rem;color: #282828;margin-top: .3rem;">{{data.bookname}}</p>
						<p style="font-size: 1.3rem;color: #666666;margin-bottom: 0;margin-top: -0.5rem;">作者 : {{data.bookauthor}}</p>
						<p class="aui-ellipsis-2" style="font-size: 1.3rem;color: #666666;margin-bottom: 0;">出版社 : {{data.bookpublish}}</p>
						<p class="aui-ellipsis-2" style="font-size: 13px;color: #666666;margin-top: 0.5rem;">{{data.bookwrodnumber}}</p>
						
					</div>
				</div>
			</div>
			<div class="author  col-xs-12" data-userid="{{data.copywriteInfo.userid}}" data-type="0" style="height: 5.83rem;padding: 1.25rem 1.67rem 1.5rem 1.67rem;position: relative;">
				<img src="{{data.copywriteInfo.headimg | addFaceUrl}}" / style="width: 3.23rem;height: 3.23rem;float: left;margin-right: .83rem;border-radius: 50%;">
				<div style="float: left;">
					<p style="font-size: 14px;color: #282828;margin: 0 0;">{{data.copywriteInfo.nickname}}</p>
					<p style="font-size: 12px;color: #999999;margin: 0 0;">蜜读特约撰稿人</p>
				</div>
				<img src="icon/more.png" alt="" style="width: 1.67rem;height: 1.67rem;position: absolute;top:50%;transform: translateY(-50%);right: 1.67rem;" />
			</div>
			<div class="col-xs-12" style="height: 0.5rem;width: 100%;background-color:#F8F8F8"></div>
		</div>
		<div class="col-xs-12" style="padding-bottom: {{if data.isorder==0}}5rem{{else if data.isorder==1}}5rem{{/if}}">
			<div id="tabs" style="height: 3.75rem;align-items: center;justify-content: space-around;font-size: 15px;color: #666;display: flex;background: #FFFFFF;">
				<div class="active" style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">详情</div>
				<div style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">章节</div>
				<div style="position: relative;width: 33.33%;text-align: center;height: 100%;line-height: 3.75rem;">评论</div>
			</div>
			<div id="detail" class="tab" style="padding: 2.5rem 0 0 0;">
				<div id="command">
					<p style="font-size: 1.5rem;color: #282828;font-family: .PingFangSC-Medium;font-weight: 700;">推荐语</p>
					<p style="font-size: 15px;color: #282828;font-weight: 500;">{{data.bookrecommend}}</p>
					<p style="font-size: 13px;color: #282828;">{{data.contentsummary}}</p>
				</div>
				<div id="content_detail" style="padding: 2.5rem 0 0 0;display:{{if data.isorder==1}}none{{else if data.isorder==0}}block{{/if}};">
					<p style="font-size: 1.5rem;color: #282828;margin-bottom: 0;padding-bottom: 1.25rem;text-align: left;font-family: .PingFangSC-Medium;font-weight: 700;">内容简介</p>

					{{if data.mapping_small_img}}
					<div style="height: 20.2rem;padding: .83rem .83rem 0 .83rem;background: #FFFFFF;border: 1px solid #E5E5E5;">
						<img src="{{data.mapping_small_img | addUrl}}" style="width: 100%;height: 12.5rem;" />
						<div style="font-size: 12px;color: #999999;line-height: 2.9rem;height: 2.9rem;" align="center">思维导图部分截图</div>
						<div id="mindnode" data-src="{{data.mapping_img | addUrl}}" style="position: relative;font-size: 13px;color: #282828;height: 3.85rem;line-height: 3.85rem;width: 100%;text-align: left;border-top: 1px solid #E5E5E5;">购买后查看完整思维导图
							<img src="icon/more.png" alt="" style="width: 1.67rem;height: 1.67rem;position: absolute;top:50%;transform: translateY(-50%);right: 1.67rem;" />
						</div>
					</div>
					{{/if}}
					<div id="worth" style="padding: 2.5rem 0 0 0;">
						{{@data.content}}
					</div>
					<p style="font-size: 14px;color: #282828;line-height: 20px;padding-top: 1.25rem;text-align: left;"></p>
				</div>
				<p style="font-size: 14px;color: #282828;line-height: 20px;margin-bottom: 0;">{{@data.content}}</p>

				<div class="clearfix">
					<em id="open" class="col-xs-12" align="center" style="padding: 2rem 0 2rem 0;"><var>{{if data.isorder==1}}展开{{else if data.isorder==0}}收起{{/if}}</var> <img src="icon/next.png" style="width:1.67rem;display: inline;" alt=""></em>
				</div>
			</div>
			<div class="col-xs-12" style="height: 0.5rem;width: 100%;background-color:#F8F8F8"></div>
			<div id="meun" class="tab" style="padding-top: 2.5rem;">
				<span style="display: block;color: #282828;font-weight: 700;font-size: 18px;">章节目录</span>
				<div id="wpr">
					{{each data.bookchapter_list}}
					<div class="item flex"  data-chapterid={{$value.chapterid}}>
						<div style="display: block;width: 100%;">
							<b class="aui-ellipsis-1">{{$value.chapternumber}}　{{$value.chaptername}}</b>
							<img src="../icon/people.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;">{{data.reference_click_count | release $index $value.virtual_click_count}}人读过
							{{if progessArr[$index] != 0}}
							<img src="../icon/time.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;margin-left: 1.7rem;">{{$value.chapterduration + " " + progessArr[$index]}}
							{{else}}
							<img src="../icon/time.png" / style="width:1.67rem;vertical-align: middle;display: inline;margin-right: .33rem;margin-left: 1.7rem;">{{$value.chapterduration}}
							{{/if}}
						</div>
					</div>
					{{/each}}
				</div>
				</div>
					<!--&lt;!&ndash;音频转述师&ndash;&gt;-->
					<div id="transer" data-type="1" data-userid="{{data.videoauthorInfo.userid}}" >
						<div style="background: #F8F8F8;border-radius: 5px;padding: 1.25rem;color: #282828;line-height: 1.4;">
							<div style="justify-content:space-between;align-items: center;display: flex;">
								<div class="left">
									<img src="{{data.videoauthorInfo.headimg | addFaceUrl}}" />
									<section style="display: inline-block;font-size: 14px;color: #282828;">
										{{data.videoauthorInfo.nickname}}
										<small style="display: block;font-size: 12px;color: #999999;">音频转述师</small>
									</section>
								</div>
								<em>
							<img src="icon/more.png"/ style="width: 1.67rem;height: 1.67rem;">
						</em>
							</div>
							<p style="font-size: 14px;color: #282828;line-height: 20px;margin-top: .83rem;">{{data.videoauthorInfo.signature}}</p>
						</div>
					</div>
					<div class="youlike" style="overflow: hidden;">
						<h4 class="" style="font-size: 18px;color: #282828;margin: 2.5rem 0 1.25rem 0;">猜你喜欢</h4>
						<div class="wpr">
							{{each data.recommendList}}
							<div class="col-xs-12" style="height: 2rem;width: 100%;"></div>
							<div class="col-xs-12 bookdetail" style="padding-right: 0;padding-left: 0;height: 12.7rem;" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}}>
								<div class="col-xs-4" style="width: 9.17rem;height: 12rem;padding-left: 0;padding-right: 0;">
									<a href="javascript:;" style="display:block;height: 100%;position: relative;">
										<img src="{{$value.bookimg | addUrl}}" style="box-shadow:0.1rem 0.1rem 1rem #e6e6e6;width: 9.17rem; border-radius: 4px; height: 12rem;margin: 0;border: 0;vertical-align: middle;">
										<em style="position: absolute;display: block;width: 1.67rem;height: 1.67rem;bottom:0;right: 0.1rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
									</a>
								</div>
								<div class="col-xs-8" style="padding: 0 5%;margin: 0;height: 12rem;">
									<div class="col-xs-12" style="padding: 0;margin: 0;">
										<p class="aui-ellipsis-1" style="font-family: bolder;font-size: 1.6rem;color: #282828">{{$value.bookname}}</p>
										<p class="aui-ellipsis-2" style="font-size: 1.4rem;color: #666666;">{{$value.bookrecommend}}</p>
									</div>
									<div class="col-xs-7" style="position:absolute;bottom:0;padding: 0;margin: 0;">
										<p style="font-size: 1.4rem;color: #534f4b;margin: 0;">{{$value.videoduration}}</p>
									</div>
									
									{{if (userVip.type==1)||$value.isorder==1}}
									<div class="youLikeBuy" data-bookid={{$value.bookid}} data-isorder={{$value.isorder}} style="position: absolute;right: 0;bottom: 0;width: 7.5rem;height:3rem;background-image: linear-gradient(-179deg, #fbd454 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;line-height: 3.15rem;font-weight: bold;">
										开始听书 
									</div>
									{{else}}
					                <div style="position: absolute;right: 0.5rem;bottom: 0.5rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #FF9D3C;">
						                {{"¥ " + $value.bookprice}}
					                </div>
									{{/if}}
								</div>
							</div>
							{{/each}}
						</div>
					</div>
					<div class="comment tab" id="comment" style="overflow: hidden;">
						<h4 class="" style="font-size: 18px;color: #282828;margin: 2.5rem 0 1.25rem 0;position: relative;">
							精选评论
							<div id="writeComment">写评论</div>
						
						</h4>
						<div class="wpr">
							{{if !data.commentList}}
								<div style="text-align: center;color: #999;padding: 3rem 0;">
									与世界分享你的智慧
								</div>
							{{/if}}
							{{each data.commentList}}
							<div style="width: 100%;padding: 1rem 1rem;overflow: hidden;padding-bottom: 0;" class="border-b">
								<div class="clearfix">
									<img src="{{$value.headimg | addFaceUrl}}" style="width: 3.3333rem;height: 3.3333rem;border-radius: 100%;float:left;margin-right: 1rem;" />
									<div style="float: left;">
										<div style="color: #333;">{{$value.nickname}}</div>
										<div style="color: #999;">{{timeFormat($value.gmtCreated) }}</div>
									</div>
									<div class="col-xs-2 praise-parent" style="padding-right:0;padding-left: 0;float: right;">
										{{if $value.islike}}
										<img class="praise" data-isfavor="true"  src="icon/button_praise_pressed.png30.png" alt="">
											{{else}}
											<img class="praise" data-isfavor="false" src="icon/dianzan@2x.png" timeDot="{{$value.id}}">
											{{/if}}
										<p class="count" style="float:left;line-height:1.77rem;margin-left:0.33rem;font-size:13px;color:#666666;">{{$value.likeCount||0}}</p>
									</div>
								</div>
								<div style="padding:1rem 0 1rem 4.3333rem;">
									{{$value.content}}
								</div>
								{{if $value.replys}}
									<div style="padding:0rem 0rem 1rem 4.3333rem;">
										<div style="background: #f3f5f7;padding: 0.5rem 0.5rem;">
											<span style="float:left;color: #5bae6b;">作者回复：</span> {{each $value.replys}}
											<div>{{$value.content}}</div>
										{{/each}}
										</div>
									</div>
								{{/if}}
							</div>
							{{/each}}
						</div>
					</div>
					<div id="warn" style="">请先登录！</div>
				</div>

				<div id="footer" style="display: {{if userVip.type != 1&&data.isorder!=1}}block{{else}}none{{/if}};">
					{{if data.book_activity==2}}
					<div id="free-receive" class="col-xs-7" style="">
				        免费领取
			        </div>
					{{else}}
					{{if type==1}}
					<div id="tryread" class="col-xs-5" style="">
						赠一得一<br /><span id="" style="font-size: 12px;">免费</span>
					</div>
					{{else}}
					
					{{if dict}}
		        <div id="pay_book" class="col-xs-5" style="">
						购买¥{{data.bookprice}}<br /><span id="" style="font-size: 12px;">优惠券已抵扣{{dict.price}}元</span>
					</div>
		        {{else}}
		        <div id="pay_book" class="col-xs-5">
						购买¥{{data.bookprice}}
				</div>
		        {{/if}}
					
					
					{{/if}}
					<div id="buy" class="col-xs-7">
						{{if userVip.type==-1}}
						VIP已到期，去续费
						{{else}}
						加入VIP，免费听书
						{{/if}}
					</div>
					{{/if}}	
				</div>
	</script>
	<div class="MD_alertView hide">
	<div class="MD_blackView" style="position: fixed; top: 0; left: 0;width: 100%;height: 100%;z-index: 10000;background: rgba(38,38,38,0.66);"></div>
	<div class="MD_bigView" style="background-color: white; position: fixed; left: 15%; width: 70%; height: auto; top: 20rem; border-radius: .8rem; z-index: 10001;">
		<p class="alert_title" align="center" style="font-size: 1.7rem; color: #333333; font-weight: bold;margin: 2rem 1.5rem;"></p>
		<div style="background-color: #EEEEEE;width: 100%;left: 0;height: 0.1rem;"></div>
		<div class="cancelBtn" align="center" style="left: 0; width: 50%; font-size: 1.5rem; height: 4.0rem; color: rgb(2,86,234);padding-top: 1.1rem;margin-bottom: 1.5rem;border-right: .1rem solid #EEEEEE;"></div>
		<div class="saveBtn" align="center" style="margin-left: 50%;margin-top: -5.5rem; width: 50%; font-size: 1.5rem; height: 4.0rem; color: rgb(2,86,234); padding-top: 1.1rem;"></div>
	</div>
</div>
</html>

<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purl.js"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script type="text/javascript">


	var dialog = new auiDialog();
	var toast = new auiToast();
	var bookData = null;
	var isorder=GetQueryString('themeisorder')
	var openId2 = GetQueryString("openId2");
	var bookname='', bookimg='', bookrecommend='';
	var slideState;
	var type = GetQueryString('activity_type');//用来判断是否显示赠一得一提示
	var stage = GetQueryString('stage');
	var dict;
	var bookId = GetQueryString('bookid');
	var themeid = GetQueryString('themeid');
    history ++
    $('.backToHome').click(function(){
        location.href = "index.html?merchantId="+merchantId
    })





    if(GetQueryString('home')){
        $('.backToHome').removeClass('hide')
    }
	template.defaults.imports.timeFormat=function(str){
	    var date=str.split(' ')[0];
		var dateStr=date.split('-')[1]+'-'+date.split('-')[2];
		var time=str.split(' ')[1]
		var timeStr=time.split(':')[0]+':'+time.split(':')[1];
		return dateStr+' '+timeStr
	}
	
	template.defaults.imports.release = function(data, index, count) {
		
		if (!count) {
			count = 0;
		}
		
		if (!data) {
			data = 0;
		}
		
		if(index < 6) {
			return Math.floor(data * (0.8 - index * 0.05)) + count;
		} else if(index >= 6 && index < 16) {
			return Math.floor(data * (0.5 - (index - 6) * 0.02)) + count;
		} else {
			return Math.floor(data * (0.3 - (index - 16) * 0.01)) + count;
		}
	}

	template.defaults.imports.addFaceUrl = function(value) {
		if(value == "" || value == null) {
			return "img/book.png"
		} else {
			if(checkURL(value)) {
				return value;
			} else {
				return imgFaceurl + value
			}
		}
	};

	
	//分享按钮和解除
	var bindAndUnbindClick=function(){
		setTimeout(function(){
			$('.open-code-btn').on('click',function(){
				location.href="auth.html";
			})
			$('.follow-code-btn').on('click',function(){
				$('.follow-code-container').show()
			})
			$('.follow-code-container .follow-close').on('click',function(){
				$('.follow-code-container').hide()
			})
			$('.follow-code-container .follow-mask').on('click',function(){
				$('.follow-code-container').hide()
			})
		},500)
	}
	
	function checkURL(str) {
		if(str.match(/(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/i) == null) {
			return false
		} else {
			return true;
		}
	}

	function colpase() {
		$('#open').click(function() {
			if(slideState != 1) {
				$(this).addClass('down').find('var').text('收起');
				$("#content_detail").show();
			} else {
				$(this).removeClass('down').find('var').text('展开');
				$("#content_detail").hide();
				$('body').animate({
					scrollTop: 0
				}, 300, 'swing')
			}
			slideState = !slideState;
		})
		$('#open').trigger('click');
	}

	template.defaults.imports.timestamp = function(value) {
		return Date.parse(new Date(value))
	};


	$(function() {
		
		function after() {
			toast.loading({
				title: "加载中",
				duration: 2000
			});
            var sign = hex_md5(objKeySort({token:token,timestamp:date,bookid:bookId,merchantId:merchantId}))
            $.ajax({
				type: "get",
				url: hostUrl + "product/book/detail/" + token + "/"+ sign +"/"+ date +"/" + bookId +'/'+ merchantId ,
				async: true,
				success: function(data) {

					bookname=data.data.bookname;
					bookimg=data.data.bookimg;
					bookrecommend=data.data.bookrecommend;
					data.type = type;//用来控制是否可以赠一得一
					data.userVip=userVip;
					$("title").text(data.data.bookname);
					$("#worth").html(data.data.content);
					
					//已购书包进来   
					if(!isorder) {
						data.isorder = data.data.isorder;
						isorder = data.data.isorder;
					} else {
						isorder = 1;
						data.data.isorder = 1;
						data.themeisorder=1;
					}
					
					if (type == 1 && (userVip.type != 1 && isorder != 1)) {
						$('.share_alert').removeClass('hide');
					}

                    var userInfo=JSON.parse(sessionStorage.getItem('weixinData')).data;
                    var titleStr = userInfo.nickname + "诚邀你来我的听书馆，海量好书无限听《" + bookname + "》"
                    shareWx(titleStr, data.data.bookimg, bookrecommend)
					if (isorder == 1 || userVip.type == 1) {
						slideState = 1;
					} else{
						slideState = 0;
					}
					
					bookData = data;
                    var html = template("detail_tem", data);
                    document.getElementById('content').innerHTML = html;
                    var page =1
					$.ajax({
						type: "get",
						url: 　hostUrl + "product/comment/list?recommend=1&productId=" + bookId + "&page=" + page + "&rows=" + 10 +"&openId=" + openId,
						async: true,
						success: function(data2) {
							data.data.commentList = data2.data.list;
							colpase();
							myScrollTo();
							$('#tabs div').on('click', function(e) {
								
								$('#tabs div').removeClass('active');
								$(this).addClass('active');
								var zIndex = $(this).index();
								zTop = $('.tab').eq(zIndex).offset().top;
								
								if(zIndex == 0) {
									$('body').animate({
										scrollTop: 0
									}, 300, 'swing')
								} else {
									$('body').animate({
										scrollTop: zTop - 70
									}, 300, 'swing')
								}
							});
							
							toast.hide();
							bindAndUnbindClick();
						}
					});
				}
			});
		}
		 getToken(after);
		
		//开始听书
		$('body').on('click', '#beginRead', function() {
			var url="chapter.html?bookid=" + bookId + "&bookname="+bookname+"&bookimg=" + bookimg;
			if(isorder==1){
				url+='&themeisorder=1'
			}
			if (themeid) {
				url+='&themeid='+ themeid;
			}
			location.href = url
		})
		$('body').on('click','#writeComment',function(){
			
			location.href="comment.html?type=book&bookid="+bookId;
		})
		
		$("body").on('click', ".praise-parent", function() {
			var _this=$(this).find('.praise')
			if(userId == 0) {
				$("#warn").show();
				setTimeout(function() {
					$("#warn").hide();
				}, 2000)
			} else {
				if(_this.attr("data-isfavor") == "false") {
					_this.attr("src", "icon/button_praise_pressed.png30.png");
					_this.attr("data-isfavor", "true");
					var s = _this.siblings('.count').html() - 0;
					_this.siblings('.count').html(s + 1);
					var url = hostUrl + "product/comment/like?id=" + _this.attr('timeDot') + "&openId=" + openId;
					$.ajax({
						type: "get",
						url: url,
						async: true,
						success: function(data) {
						}
					});

				} else {
					weekTip("您已点过赞");
				}
			}
		})


		$("#back").click(function() {
			window.location.href = "index.html?merchantId="+merchantId
		});
		
		$("#comment").click(function() {
			window.location.href = "comment.html?bookid=" + bookId + "&type=2";
		});
		
		//试读
		$("#content").on('click', '#tryread', function(e) {
			e.stopPropagation();
			//禁止滑动
			document.body.style.overflow = 'hidden';
			window.addEventListener('touchmove',_preventDefault);
			$('.share_alert').removeClass('hide')
		})
		
		//免费领取
		$("#content").on('click', '#free-receive', function(e) {
			e.stopPropagation();
			$.ajax({
				type:"get",
				url:hostUrl + "order/freetime?channel=weixin&userid=" + openId + "&themeid=" + bookId + "&type=1",
				async:true,
				success:function(data) {
					if (data.status == 0) {
						location.reload();
					}
				}
			});
		})
		
		//支付
		$("#content").on('click', '#pay_book', function(e) {
			e.stopPropagation();
                payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 2, GetQueryString('bookid'), false);
		})
		
		function _preventDefault(e){
			e.preventDefault();
		}
		
		$('.share_alert').click(function(){
			//恢复滑动效果
			document.body.style.overflow = 'auto';
			window.removeEventListener('touchmove', _preventDefault);
			$('.share_alert').addClass('hide')
		});
		
		$("#content").on('click', '#buy', function() {
			var url="memberPage.html?shareBack=1"
			location.href=url;
		});

		$("#content").on('click', '#mindnode', function() {
			if(userVip.type==1||isorder==1) {
				window.location.href = "mind.html?src=" + $(this).attr('data-src') + "&bookname=" + Q.encode($("#bookname").text());
			} else {
				createAlertView("思维导图,购买后才能查看","取消","免费领取");
			}
		})
		$("#content").on("click", "#wpr .item", function() {
			var chapterIndex = $(this).index();
			if(userVip.type==1 || isorder == 1) {
				//章节已读统计
				$.ajax({
					type: "get",
					url: 　hostUrl + "statistics/bookchapter_count?channel=weixin&openId=" + openId + "&chapterid=" + $(this).attr("data-chapterid"),
					async: true,
					success: function(data) {
						var url="chapter.html?bookid=" + bookId + "&chapterIndex=" + chapterIndex + "&bookname="+bookname+"&bookimg=" + bookimg;
						if(isorder==1){
							url+='&themeisorder=1'
						}
						if (themeid) {
				url+='&themeid='+ themeid;
			}
						location.href = url;
					}
				});
			} else {
				if(openId == 0) {
					weekTip("请先登录");
				} else {

						createAlertView("精品解读版,购买后才能阅读","取消","购买");
				}
			}
		})

		//猜你喜欢书籍跳转
		$("#content").on('click', '.bookdetail', function() {
			window.location.href = "bookDetail.html?bookid=" + $(this).attr('data-bookid') + "&videoauthorid=" + $(this).attr('data-videoauthorid') + "&copywriter=" + $(this).attr('data-copywriter');
		})
		$("#content").on('click', '.youLikeBuy', function(e) {
			e.stopPropagation();
			var parent=$(this).parents('.bookdetail')
			var url="chapter.html?bookid=" +parent.attr('data-bookid') +"&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
			location.href = url
		})
		$("#content").on('click', '.buy', function(e) {
			var url="chapter.html?bookid=" + bookId +"&bookname="+bookname+"&bookimg=" + bookimg;
			if(isorder==1){
				url+='&themeisorder=1'
			}
			if (themeid) {
				url+='&themeid='+ themeid;
			}
			location.href = url
		})
		
		//加入书架
		$('body').on('click','#addBookshelf',function(){
            var sign = hex_md5(objKeySort({token:token,timestamp:date,productId:bookId}))
            if(isorder==1){
				return;
			}
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "post",
				url: hostUrl + "user/bookshelf/add/"+ token +"/"+ sign +"/"+ date +"/" + bookId ,
				data:{
                    token:token,
					timestamp:date,
					productId:bookId,
					sign:sign
				},
				async: true,
				success: function(data) {
					toast.hide();
					weekTip("已加入书架");
					$('#addBookshelf').attr('id','removeBookshelf').html('移除书架')
				}
			});
			
		})
		//移除书架
		$('body').on('click','#removeBookshelf',function(){
			if(isorder){
				weekTip("已购书本无法移除");
				return;
			}
			toast.loading({
				title: "加载中",
				duration: 2000
			});
			$.ajax({
				type: "get",
				url: hostUrl + "user/bookshelf/del?openId=" + openId+"&id="+bookId,
				async: true,
				success: function(data) {
					toast.hide();
					weekTip("已移除书架");
					$('#removeBookshelf').attr('id','addBookshelf').html('加入书架')
				}
			});
			
		})
	})

	$('#content').on('click', '.author,#transer', function() {
		window.location.href = "audioTransfer.html?authorId=" + $(this).data('userid') + "&type=" + $(this).attr('data-type');
	})

	function myScrollTo(cur) {
		window.onscroll = function() {
			var t = document.documentElement.scrollTop || document.body.scrollTop;
			var heigt = $("header").height();
			var hei1 = $("#tabToTop").height();
			var zong = heigt + hei1;

			if(t >= hei1) {
				$("#tabs").css({
					"position": "fixed",
					"top": "0px",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});
				$("#detail").css("margin-top", "3.75rem");
			} else {
				$("#tabs").css({
					"position": "relative",
					"top": "0",
					"left": "0",
					"right": "0",
					"z-index": "99"
				});
				$("#detail").css("margin-top", "0");
			}

			if(t <= $('.tab').eq(1).offset().top - 130) {
				$('#tabs div').removeClass('active');
				$('#tabs div').eq(0).addClass('active');
			} else {
				$('#tabs div').removeClass('active');
				$('#tabs div').eq(1).addClass('active');
			}
		}
	}
	var isPageHide = false;
        window.addEventListener('pageshow', function () {
        	  setTimeout(function(){
        	  	if (isPageHide) {
              location.reload()
            }
		  },500)
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
        });
	
	function createAlertView(titleStr,btn1,btn2){
		$('.MD_alertView').removeClass('hide');
		$('.alert_title').text(titleStr);
		$('.cancelBtn').text(btn1);
		$('.saveBtn').text(btn2);
		//禁止滑动
		document.body.style.overflow = 'hidden';
		window.addEventListener('touchmove',_preventDefault);
	}
	
	$('.cancelBtn').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
	})
	
	$('.saveBtn').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
			payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 2, GetQueryString('bookid'), false);
	})
	
	$('.MD_blackView').click(function(){
		//恢复滑动效果
		document.body.style.overflow = 'auto';
		window.removeEventListener('touchmove', _preventDefault);
		$('.MD_alertView').addClass('hide');
	})
	
	function _preventDefault(e){
         e.preventDefault();
	}

    (function() {
        var mta = document.createElement("script");
        mta.src = "//pingjs.qq.com/h5/stats.js?v2.0.4";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500636065");
        mta.setAttribute("cid", "500636067");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
	
</script>